<!doctype html>
<html lang="en">
<head>
    <title>订单统计</title>
    <meta charset="UTF-8">
    <script src="../../js/echarts.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .chart-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            flex: 1;
            min-width: 500px;
        }
        .chart-container {
            width: 100%;
            height: 400px;
        }
        .date-filter {
            text-align: center;
            margin-bottom: 20px;
        }
        .date-filter input {
            margin: 0 10px;
            padding: 5px;
        }
        .date-filter button {
            padding: 5px 15px;
            background-color: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>订单统计报表</h1>
    <div class="date-filter">
        <label>开始日期: <input type="date" id="startDate"></label>
        <label>结束日期: <input type="date" id="endDate"></label>
        <button onclick="loadData()">查询</button>
    </div>
</div>

<div class="container">
    <!-- 订单金额趋势图 -->
    <div class="chart-card">
        <h2>订单金额趋势</h2>
        <div id="trendChart" class="chart-container"></div>
    </div>

    <!-- 订单状态分布图 -->
    <div class="chart-card">
        <h2>订单状态分布</h2>
        <div id="statusChart" class="chart-container"></div>
    </div>

    <!-- 商品销售排行 -->
    <div class="chart-card">
        <h2>商品销售排行</h2>
        <div id="productChart" class="chart-container"></div>
    </div>
</div>

<script type="text/javascript">
    // 初始化图表
    var trendChart = echarts.init(document.getElementById('trendChart'));
    var statusChart = echarts.init(document.getElementById('statusChart'));
    var productChart = echarts.init(document.getElementById('productChart'));

    // 设置默认日期范围（最近7天）
    function setDefaultDateRange() {
        const today = new Date();
        const startDate = new Date(today);
        startDate.setDate(today.getDate() - 7);

        document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
        document.getElementById('endDate').value = today.toISOString().split('T')[0];
    }

    // 加载数据
    function loadData() {
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;

        if (!startDate || !endDate) {
            alert('请选择日期范围');
            return;
        }

        loadTrendData(startDate, endDate);
        loadStatusData();
        loadProductData();
    }

    // 加载趋势数据
    function loadTrendData(startDate, endDate) {
        fetch(`/vegetablemarketexpress/order/statistics/trend?startDate=${startDate}&endDate=${endDate}`)
            .then(response => response.json())
            .then(result => {
                if (result.code === 200) {
                    const data = result.data;
                    const dates = data.map(item => item.date);
                    const amounts = data.map(item => parseFloat(item.totalAmount));
                    const counts = data.map(item => parseInt(item.orderCount));

                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['订单金额', '订单数量']
                        },
                        xAxis: {
                            type: 'category',
                            data: dates
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '金额(元)'
                            },
                            {
                                type: 'value',
                                name: '订单数'
                            }
                        ],
                        series: [
                            {
                                name: '订单金额',
                                type: 'line',
                                data: amounts,
                                smooth: true
                            },
                            {
                                name: '订单数量',
                                type: 'bar',
                                yAxisIndex: 1,
                                data: counts
                            }
                        ]
                    };

                    trendChart.setOption(option);
                }
            })
            .catch(error => {
                console.error('加载趋势数据失败:', error);
            });
    }

    // 加载状态数据
    function loadStatusData() {
        fetch('/vegetablemarketexpress/order/statistics/status')
            .then(response => response.json())
            .then(result => {
                if (result.code === 200) {
                    const data = result.data.map(item => ({
                        name: item.statusName,
                        value: parseInt(item.count)
                    }));

                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: 'bottom'
                        },
                        series: [
                            {
                                name: '订单状态',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                data: data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    statusChart.setOption(option);
                }
            })
            .catch(error => {
                console.error('加载状态数据失败:', error);
            });
    }

    // 加载商品排行数据
    function loadProductData() {
        fetch('/vegetablemarketexpress/order/statistics/product-ranking?limit=10')
            .then(response => response.json())
            .then(result => {
                if (result.code === 200) {
                    const data = result.data;
                    const productNames = data.map(item => item.productName);
                    const quantities = data.map(item => parseFloat(item.totalQuantity));

                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: productNames
                        },
                        series: [
                            {
                                name: '销售量',
                                type: 'bar',
                                data: quantities
                            }
                        ]
                    };

                    productChart.setOption(option);
                }
            })
            .catch(error => {
                console.error('加载商品数据失败:', error);
            });
    }

    // 页面加载完成后初始化
    window.addEventListener('load', function() {
        setDefaultDateRange();
        loadData();
    });

    // 响应式调整
    window.addEventListener('resize', function() {
        trendChart.resize();
        statusChart.resize();
        productChart.resize();
    });
</script>
</body>
</html>
